<script setup>
// 不再直接引入 HelloWorld 组件
</script>

<template>
  <div class="app-container">
    <header>
      <nav>
        <router-link to="/"> 首页 </router-link> |
        <router-link to="/about"> 关于 </router-link>
      </nav>
      <div class="logo-container">
        <a href="https://vite.dev" target="_blank">
          <img src="/vite.svg" class="logo" alt="Vite logo" />
        </a>
        <a href="https://vuejs.org/" target="_blank">
          <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
        </a>
      </div>
    </header>

    <main>
      <router-view />
    </main>
  </div>
</template>

<style>
.app-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 10px;
  text-align: center;
}

header {
  margin-bottom: 32px; /* 将 2rem 改为 32px */
}

nav {
  margin-bottom: 16px; /* 将 1rem 改为 16px */
}

nav a {
  margin: 0 8px; /* 将 0.5rem 改为 8px */
  font-weight: bold;
}

.logo-container {
  display: flex;
  justify-content: center;
}

.logo {
  height: 96px; /* 将 6em 改为 96px */
  padding: 24px; /* 将 1.5em 改为 24px */
  will-change: filter;
  transition: filter 300ms;
}

.logo:hover {
  filter: drop-shadow(0 0 32px #646cffaa); /* 将 2em 改为 32px */
}

.logo.vue:hover {
  filter: drop-shadow(0 0 32px #42b883aa); /* 将 2em 改为 32px */
}

main {
  margin-top: 32px; /* 将 2rem 改为 32px */
}
</style>
